<template>
	<view class="container">
		<view class="tui-addr-box">
			<form @submit="formSubmit">
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">特约商户号</view>
						<input placeholder-class="tui-phcolor" class="tui-input" name="merchant_id" v-model="shopInfo.sub_merchant_id"
							placeholder="请输入特约商户号" maxlength="10" type="text" style="width:360rpx"/>
					</view>	
				</tui-list-cell>
				
				<tui-list-cell :hover="false" padding="0">
					<view class="tui-line-cell">
						<view class="tui-title">商户APPID</view>
						<input placeholder-class="tui-phcolor" class="tui-input" name="app_id" v-model="shopInfo.sub_app_id"
							placeholder="请输入APPID" maxlength="20" type="text" />
					</view>
				</tui-list-cell>
				<!-- 保存地址 -->
				<view class="tui-btn__box">
					<view class="tui-addr-save">
						<tui-button shadow type="danger" height="88rpx" shape="circle" formType="submit">点击保存</tui-button>
					</view>
				</view>
			</form>
		</view>
		
	</view>
</template>
<script>
	const form = require("@/components/common/tui-validation/tui-validation.js")
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	export default {
		data() {
			return {
				checked: false,
				array: [],
				index: 0,
				
				shopInfo: {
					sub_merchant_id: "",
					sub_app_id: "",
				}, //  地址	
				shop_id: "",
				value:'',
			};
		},
		onShow() {
			this.tui.haslogin();
			this.inits()	
		},
		methods: {
			
			inits() {
				let token = this.tui.getToken();
				let joiningTrader = {
					token: token,
				};
				let shopInfo = this.tui.request('shop', 'post', joiningTrader, 1000, 1, '', 'getSubMchPayParams');
				Promise.resolve(shopInfo).then((value) => {
					if (value.code == 200) {
						if(value.data){
							this.shopInfo = value.data
						}
						
					}
				})
			},
			
			formSubmit: function(e) {
				//表单规则
				let rules = [{
					name: "merchant_id",
					rule: ["required"], //可使用区间，此处主要测试功能
					msg: ["请输入特约商户号"]
				}, {
					name: "app_id",
					rule: ["required"],
					msg: ["请输入商户APPID"]
				}];
				//进行表单检查
				let formData = e.detail.value;
				let checkRes = form.validation(formData, rules);
				if (!checkRes) {
					let token = this.tui.getToken();
					let datas = {
						token: token,
						sub_app_id: formData.app_id,
						sub_merchant_id:formData.merchant_id,
					};
					
		
					this.isloading = true;
					this.isdisabled = true;
					let shopedit = this.tui.request('shop', 'post', datas, 1000, 1, '', 'merchantsBindAppid');
					Promise.resolve(shopedit).then((value) => {
						if (value.code == 200) {
					
							this.isloading = false;
							this.isdisabled = false;
							this.tui.toast(value.message);
							setTimeout(() => {
								uni.navigateTo({
									url: '/pageschild/shop/index'
								});
							}, 800)
						} else {
							this.tui.toast(value.message);
							this.isloading = false;
							this.isdisabled = false;
						}
					})
				} else {
					this.tui.toast(checkRes);
					return;
				}
			},
			
			deleteImage: function(e) {
				const index = e.index;
				this.imgs.splice(index, 1);
			},
			
		},
	};
</script>

<style>
	page {
		background-color: #f7f7f7;
	}

	.container {
		padding-bottom: 100rpx;
		margin-top: 20rpx;
		color: #333;
	}

	/* picker start*/

	.tui-mask-screen {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 99996;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.tui-mask-show {
		opacity: 1;
		visibility: visible;
	}
    .tui-textarea {
    	border: 2rpx solid #efeeee;
    	height: 120rpx;
    	border-radius: 10rpx;
    	padding: 10rpx;
    	font-size: 26rpx;
    	/* 		background:#f8f7f6; */
    }
	.tui-upload-item {
		width: 146rpx;
		height: 146rpx;
		position: relative;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	
	}
	
	.tui-upload-del {
		position: absolute;
		right: -18rpx;
		top: -18rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tui-picker-box {
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;
		visibility: hidden;
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
		min-height: 20rpx;
		background: #fff;
	}

	.tui-pickerbox-show {
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}

	.picker-header {
		width: 100%;
		height: 90rpx;
		padding: 0 46rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		font-size: 32rpx;
		background: #fff;
	}

	.tui-list-item::after {
		left: 0;
	}

	.btn-cancle {
		padding: 20rpx;
		color: #888;
	}

	.btn-sure {
		padding: 20rpx;
		color: #5677fc;
	}

	.picker-view {
		width: 100%;
		height: 260px;
	}

	.item {
		text-align: center;
	}

	.picker-item {
		text-align: center
	}

	.tui-line-cell {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
    .tui-upload-img {
    	width: 146rpx;
    	height: 146rpx;
    	display: block;
    }
	.tui-title {
		width: 180rpx;
		font-size: 28rpx;
	}

	.tui-title-city-text {
		width: 180rpx;
		height: 40rpx;
		display: block;
		line-height: 46rpx;
	}

	.ag_title {
		margin: 40rpx 40rpx 0 30rpx;
		display: flex;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		font-size: 20rpx;
	}

	.uni-uploader__img {
		width: 100%;
		height: 100%;
	}

	.tui-input {
		width: 500rpx;
		font-size: 28rpx;
	}

	.agreement {
		color: #ff241d
	}

	.tui-btn__box {
		width: 100%;
		padding: 20px 15px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.tui-input-city {
		flex: 1;
		height: 40rpx;
		font-size: 28rpx;
		padding-right: 30rpx;
	}

	.fin-list {
		justify-content: space-between;
	}

	.fin_img {
		border: 1px dashed #d9d8d8;
		border-radius: 10rpx;
		width: 146rpx;
		height: 146rpx;
		margin: 1rpx 0;
	}

	.icon_cam {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 22rpx;
	}

	.fin_txt {
		font-size: 20rpx;
		text-align: center;
		color: #707070
	}

	.tui-phcolor {
		color: #ccc;
		font-size: 28rpx;
	}

	.tui-cell-title {
		font-size: 28rpx;
	}

	.tui-addr-label {
		margin-left: 70rpx;
	}
    .yui-location{
		position: absolute;
		right:20rpx;
		color:#ee980e;
		font-size: 24rpx;
	}
	.yui-location-icon{
		color:#f00
	}
	.tui-label-item {
		width: 76rpx;
		height: 40rpx;
		border: 1rpx solid rgb(136, 136, 136);
		border-radius: 6rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 40rpx;
		margin-right: 20rpx;
		display: inline-block;
		transform: scale(0.9);
	}

	.tui-label-active {
		background: #E41F19;
		border-color: #E41F19;
		color: #fff;
	}

	.tui-swipe-cell {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding: 10rpx 24rpx;
		box-sizing: border-box;
		border-radius: 6rpx;
		overflow: hidden;
		font-size: 28rpx;
	}

	.tui-switch-small {
		transform: scale(0.8);
		transform-origin: 100% center;
	}
</style>
